<template>
  <view class="demo-city-picker">
    <fu-city-picker
      :city-list="cityList"
      :hot-cities="hotCities"
      :location-city="locationCity"
      :show-location="true"
      @select="onCitySelect"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 当前定位城市
      locationCity: {
        code: '110100',
        name: '北京市',
        pinyin: 'beijing',
        py: 'bj'
      },
      // 热门城市
      hotCities: [
        {
          code: '110100',
          name: '北京市',
          pinyin: 'beijing',
          py: 'bj'
        },
        {
          code: '310100',
          name: '上海市',
          pinyin: 'shanghai',
          py: 'sh'
        },
        {
          code: '440100',
          name: '广州市',
          pinyin: 'guangzhou',
          py: 'gz'
        },
        {
          code: '440300',
          name: '深圳市',
          pinyin: 'shenzhen',
          py: 'sz'
        },
        {
          code: '330100',
          name: '杭州市',
          pinyin: 'hangzhou',
          py: 'hz'
        },
        {
          code: '320100',
          name: '南京市',
          pinyin: 'nanjing',
          py: 'nj'
        }
      ],
      // 城市列表
      cityList: [
        {
          letter: 'A',
          items: [
            {
              code: '152900',
              name: '阿拉善盟',
              pinyin: 'alashanmeng',
              py: 'alsm'
            },
            {
              code: '210300',
              name: '鞍山市',
              pinyin: 'anshan',
              py: 'as'
            }
          ]
        },
        {
          letter: 'B',
          items: [
            {
              code: '110100',
              name: '北京市',
              pinyin: 'beijing',
              py: 'bj'
            },
            {
              code: '130600',
              name: '保定市',
              pinyin: 'baoding',
              py: 'bd'
            }
          ]
        },
        {
          letter: 'C',
          items: [
            {
              code: '430100',
              name: '长沙市',
              pinyin: 'changsha',
              py: 'cs'
            },
            {
              code: '220100',
              name: '长春市',
              pinyin: 'changchun',
              py: 'cc'
            }
          ]
        },
        {
          letter: 'D',
          items: [
            {
              code: '210200',
              name: '大连市',
              pinyin: 'dalian',
              py: 'dl'
            },
            {
              code: '230600',
              name: '大庆市',
              pinyin: 'daqing',
              py: 'dq'
            }
          ]
        },
        {
          letter: 'F',
          items: [
            {
              code: '350100',
              name: '福州市',
              pinyin: 'fuzhou',
              py: 'fz'
            },
            {
              code: '440600',
              name: '佛山市',
              pinyin: 'foshan',
              py: 'fs'
            }
          ]
        },
        {
          letter: 'G',
          items: [
            {
              code: '440100',
              name: '广州市',
              pinyin: 'guangzhou',
              py: 'gz'
            },
            {
              code: '450100',
              name: '桂林市',
              pinyin: 'guilin',
              py: 'gl'
            }
          ]
        },
        {
          letter: 'H',
          items: [
            {
              code: '330100',
              name: '杭州市',
              pinyin: 'hangzhou',
              py: 'hz'
            },
            {
              code: '230100',
              name: '哈尔滨市',
              pinyin: 'haerbin',
              py: 'heb'
            },
            {
              code: '420100',
              name: '武汉市',
              pinyin: 'wuhan',
              py: 'wh'
            }
          ]
        },
        {
          letter: 'J',
          items: [
            {
              code: '370100',
              name: '济南市',
              pinyin: 'jinan',
              py: 'jn'
            },
            {
              code: '330400',
              name: '嘉兴市',
              pinyin: 'jiaxing',
              py: 'jx'
            }
          ]
        },
        {
          letter: 'K',
          items: [
            {
              code: '530100',
              name: '昆明市',
              pinyin: 'kunming',
              py: 'km'
            }
          ]
        },
        {
          letter: 'L',
          items: [
            {
              code: '371300',
              name: '临沂市',
              pinyin: 'linyi',
              py: 'ly'
            },
            {
              code: '410300',
              name: '洛阳市',
              pinyin: 'luoyang',
              py: 'ly'
            }
          ]
        },
        {
          letter: 'N',
          items: [
            {
              code: '320100',
              name: '南京市',
              pinyin: 'nanjing',
              py: 'nj'
            },
            {
              code: '360100',
              name: '南昌市',
              pinyin: 'nanchang',
              py: 'nc'
            }
          ]
        },
        {
          letter: 'Q',
          items: [
            {
              code: '370200',
              name: '青岛市',
              pinyin: 'qingdao',
              py: 'qd'
            },
            {
              code: '350500',
              name: '泉州市',
              pinyin: 'quanzhou',
              py: 'qz'
            }
          ]
        },
        {
          letter: 'S',
          items: [
            {
              code: '310100',
              name: '上海市',
              pinyin: 'shanghai',
              py: 'sh'
            },
            {
              code: '440300',
              name: '深圳市',
              pinyin: 'shenzhen',
              py: 'sz'
            },
            {
              code: '210100',
              name: '沈阳市',
              pinyin: 'shenyang',
              py: 'sy'
            }
          ]
        },
        {
          letter: 'T',
          items: [
            {
              code: '120100',
              name: '天津市',
              pinyin: 'tianjin',
              py: 'tj'
            },
            {
              code: '321200',
              name: '泰州市',
              pinyin: 'taizhou',
              py: 'tz'
            }
          ]
        },
        {
          letter: 'W',
          items: [
            {
              code: '420100',
              name: '武汉市',
              pinyin: 'wuhan',
              py: 'wh'
            },
            {
              code: '330300',
              name: '温州市',
              pinyin: 'wenzhou',
              py: 'wz'
            }
          ]
        },
        {
          letter: 'X',
          items: [
            {
              code: '610100',
              name: '西安市',
              pinyin: 'xian',
              py: 'xa'
            },
            {
              code: '350200',
              name: '厦门市',
              pinyin: 'xiamen',
              py: 'xm'
            }
          ]
        },
        {
          letter: 'Y',
          items: [
            {
              code: '321000',
              name: '扬州市',
              pinyin: 'yangzhou',
              py: 'yz'
            },
            {
              code: '370600',
              name: '烟台市',
              pinyin: 'yantai',
              py: 'yt'
            }
          ]
        },
        {
          letter: 'Z',
          items: [
            {
              code: '440400',
              name: '珠海市',
              pinyin: 'zhuhai',
              py: 'zh'
            },
            {
              code: '350600',
              name: '漳州市',
              pinyin: 'zhangzhou',
              py: 'zz'
            }
          ]
        }
      ]
    }
  },
  
  methods: {
    onCitySelect(city) {
      uni.showToast({
        title: `选择了 ${city.name}`,
        icon: 'none'
      })
    }
  }
}
</script>

<style lang="scss">
.demo-city-picker {
  height: 100vh;
}
</style> 